<!--单元信息内容-->
<template>
<div>
  <el-menu class="el-menu-demo" background-color="#d9ecff">
    <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
      <img src="../assets/heima.png" alt="">
      <a style="margin-left: 10px">课程学习与认证管理系统</a>
    </el-menu-item>
    <el-menu-item style="float: right">
      <el-button type="primary" @click="returnLogin">退出登录</el-button>
    </el-menu-item>
  </el-menu>
  <el-row>
    <el-col :span="(!isCollapse)? 4:1" style=";margin-top: 10px">
      <el-menu default-active="2" :collapse="isCollapse" :collapse-transition="false" >
        <div class="toggle-button" @click="toggleCollage">|||</div>
        <el-menu-item index="1"  @click="returnCourseManagement">
          <i class="el-icon-menu"></i>
          <span slot="title">课程管理</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title" >
            <i class="el-icon-menu"></i>
            <span slot="title">单元信息</span>
          </template>
          <el-menu-item index="2-1" @click="toVideo">单元视频</el-menu-item>
          <el-submenu index="2-2">
            <span slot="title">单元测试</span>
            <el-menu-item index="2-2-1" @click="toChoiceQuestion">选择题</el-menu-item>
            <el-menu-item index="2-2-2" @click="toTrueOrFalseQuestion">判断题</el-menu-item>
            <el-menu-item index="2-2-3" @click="toBlankQuestion">填空题</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">课程证书</span>
          </template>
          <el-menu-item index="3-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="4-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
      <el-row>
        <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item style="font-size: x-large" :to="{ path: 'CourseManagement' }">课程管理</el-breadcrumb-item>
            <el-breadcrumb-item style=" font-size: x-large;font-weight: bold " @click.native="returnUnitContent" >单元内容</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large" >单元信息</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
      <el-row style="margin-top:30px">
        <el-col :span="11" :offset="0">
          <el-form ref="form"  label-width="80px">
            <el-form-item label="单元名称:" prop="name" >
              <el-input  maxlength="30"  v-model="unit.title" readonly></el-input>
            </el-form-item>
            <el-form-item label="单元描述:" prop="desc">
              <el-input type="textarea"  :rows="10"  v-model="unit.describe" maxlength="300" show-word-limit resize="none" readonly></el-input>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button style="float: right" type="primary" @click="saveUnitdescribe">保存</el-button>-->
<!--            </el-form-item>-->
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</div>
</template>

<script>
import { post } from '@/common/serviceUtil'

export default {
  name: 'UnitInformation',
  methods: {
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    }, // 退出登录按钮
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    }, // 导航栏开关
    getUnitInformation () {
      post('//localhost:8088/courseUnit/getOne', this.unit).then((response) => {
        console.log(response)
        this.unit.title = response.data.data.title
        this.unit.describe = response.data.data.describe
      })
    }, // 向后端获取单元信息
    returnUnitContent () {
      this.$router.push({
        name: 'UnitContent',
        path: '/UnitContent',
        params: { CourseId: this.course.courseId }
      })
    }, // 返回全部单元界面
    toTrueOrFalseQuestion () {
      this.$router.push({
        name: 'TrueOrFalseQuestions',
        path: '/TrueOrFalseQuestions',
        params: { UnitId: this.unit.courseUnitId, courseId: this.course.courseId }
      })
    }, // 进入判断题界面
    toChoiceQuestion () {
      this.$router.push({
        name: 'ChoiceQuestion',
        path: '/ChoiceQuestion',
        params: {
          CourseId: this.course.courseId,
          UnitId: this.unit.courseUnitId
        }
      })
    }, // 进入选择题界面
    toVideo () {
      this.$router.push({
        name: 'Video',
        path: '/Video',
        params: { courseUnitId: this.unit.courseUnitId, courseId: this.course.courseId }
      })
    }, // 进入视频界面
    toBlankQuestion () {
      this.$router.push({
        name: 'BlankQuestion',
        path: '/BlankQuestion',
        params: { UnitId: this.unit.courseUnitId, courseId: this.course.courseId }
      })
    }, // 进入填空题界面
    returnCourseManagement () {
      this.$router.push('/CourseManagement')
    }, // 返回课程管理界面
    saveUnitdescribe () {
      alert('暂未开放修改功能')
    } // 保存按钮
  },
  data () {
    return {
      unit: {
        courseUnitId: '', // 存放单元ID
        title: '',
        describe: ''
      }, // 存放对应单元的信息
      course: {
        courseId: ''
      }, // 存放单元对应的课程ID
      isCollapse: false

    }
  },
  mounted () {
    this.unit.courseUnitId = this.$route.params.UnitId // 接受课程的某个单元ID
    this.course.courseId = this.$route.params.courseID // 接受课程ID
    this.getUnitInformation()
  }
}
</script>

<style lang="less" scoped>
.toggle-button{
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size:10px;
  // 设置文本行高
  line-height:24px;
  // 设置文本颜色
  color:#fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor:pointer;
}
.el-menu-item
{
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d9ecff;
  }
}
</style>
